<template>
  <div id="LabApplyItem">
    <Breadcrumb content="申请项目" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="申请项目">
          <Splitpanes class="area">
            <!-- 左侧列表 -->
            <Pane :size="55">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="keyupFeeItemEnter" @search-click="getFeeItemList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getFeeItemList"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="handleDelete"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-sort" content="数据同步" :loading="showDataLoading" @click="pullApplyItem"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-sort" content="项目知识库同步" :loading="showKnowLedgeLoading" @click="pullApplyItemKnowLedge"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" height="auto" :scroll-y="{ enabled:true }" resizable show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="rowClick" :data="FeeItemList" :loading="showLoading">
                  <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
                  <vxe-column type="seq" title="#" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="项目编号" width="90"></vxe-column>
                  <vxe-column field="feeName" title="项目名称" min-width="180"></vxe-column>
                  <vxe-column field="shortName" title="项目简称" width="120"></vxe-column>
                  <vxe-column field="feeClass" title="项目类型" width="80"></vxe-column>
                  <vxe-column field="spec" title="规格" width="60"></vxe-column>
                  <vxe-column field="price" title="单价" align="right" width="60"></vxe-column>
                  <vxe-column field="remake" title="备注" width="200"></vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <!-- 右侧表单信息 -->
            <Pane :size="45">
              <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                  <el-form ref="labFeeItemFormRef" :model="labFeeItemForm" label-width="110px" class="form-input-m baseForm" v-loading="showLoading" inline-message>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="项目名称" prop="feeName">
                          <el-input v-model="labFeeItemForm.feeName" placeholder="项目名称" clearable @mouseleave="autoInputCode()"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="项目编号" prop="feeCode">
                          <el-input v-model="labFeeItemForm.feeCode" placeholder="项目编号" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="项目简称" prop="shortName">
                          <el-input v-model="labFeeItemForm.shortName" placeholder="项目简称" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="项目类型" prop="feeClass">
                          <vxe-select v-model="labFeeItemForm.feeClass" placeholder="请选择" transfer>
                            <vxe-option v-for="item in sfxmTypeList" :key="item.code" :label="item.name" :value="item.code"></vxe-option>
                          </vxe-select>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="助记符" prop="inputCode">
                          <el-input v-model="labFeeItemForm.inputCode" placeholder="助记符" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="项目编码(HIS)" prop="hisItemCode">
                          <el-input v-model="labFeeItemForm.hisItemCode" placeholder="项目编码(HIS)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="项目名称(HIS)" prop="hisItemName">
                          <el-input v-model="labFeeItemForm.hisItemName" placeholder="项目名称(HIS)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="类别(HIS)" prop="hisItemType">
                          <el-input v-model="labFeeItemForm.hisItemType" placeholder="类别(HIS)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="项目编码(外送)" prop="wsItemCode">
                          <el-input v-model="labFeeItemForm.wsItemCode" placeholder="项目编码(外送)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="项目名称(外送)" prop="wsItemName">
                          <el-input v-model="labFeeItemForm.wsItemName" placeholder="项目名称(外送)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="项目编码(互认)" prop="hrItemCode">
                          <el-input v-model="labFeeItemForm.hrItemCode" placeholder="项目编码(互认)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="项目名称(互认)" prop="hrItemName">
                          <el-input v-model="labFeeItemForm.hrItemName" placeholder="项目名称(互认)" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="执行科室" prop="department">
                          <el-input v-model="labFeeItemForm.department" placeholder="执行科室" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="规格" prop="spec">
                          <el-input v-model="labFeeItemForm.spec" placeholder="规格" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="单价" prop="price" :edit-render="{}">
                          <el-input v-model="labFeeItemForm.price" placeholder="单价" clearable type="number"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="成本" prop="cost">
                          <el-input v-model="labFeeItemForm.cost" placeholder="成本" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="适合性别" prop="fitSex">
                          <el-radio-group v-model="labFeeItemForm.fitSex">
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                            <el-radio label="2">全部</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="是否急诊项目" prop="isEmergency">
                          <el-radio-group v-model="labFeeItemForm.isEmergency">
                            <el-radio label="0">常规</el-radio>
                            <el-radio label="1">急诊</el-radio>
                            <el-radio label="2">全部</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="起始日期" prop="startTime">
                          <el-date-picker v-model="labFeeItemForm.startTime" type="date" placeholder="起始日期" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="截止日期" prop="endTime">
                          <el-date-picker v-model="labFeeItemForm.endTime" type="date" placeholder="截止日期" clearable />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="23">
                        <el-form-item label="备注" prop="remake">
                          <el-input v-model="labFeeItemForm.remake" placeholder="请输入备注" clearable type="textarea"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="是否染色项目" prop="isStaining">
                          <el-radio-group v-model="labFeeItemForm.isStaining">
                            <el-radio label="0">否</el-radio>
                            <el-radio label="1">是</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="23">
                        <el-form-item label="染色默认结果" prop="stainingResult">
                          <el-input v-model="labFeeItemForm.stainingResult" placeholder="请输入备注" clearable type="textarea"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item class="form-footer">
                      <template #default>
                        <el-button type="primary" @click="add()">新建</el-button>
                        <el-button type="primary" v-loading="saveLoading" @click="save()">保存</el-button>
                        <el-button type="default" @click="add()">重置</el-button>
                      </template>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <ExtraPropertyPanel :busRow="form" />
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <LogInfo requestUrl="/lis/instrSetup"></LogInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import LogInfo from '@/components/LogInfo.vue'; //日志
import { findIndex } from 'lodash';
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';
import { AppStore } from '@/stores/store';

// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let store = AppStore();

const orgList = store.userInfo.orgList;
let conWidth = ref(document.documentElement.clientWidth);
let FeeItemList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let saveLoading = ref(false); //保存
let showDataLoading = ref(false);
let showKnowLedgeLoading = ref(false);
let form = reactive({}); //右侧基本信息表单
let labFeeItemForm = reactive({
  id: '',
  feeCode: '',
  feeName: '',
  feeClass: '',
  inputCode: '',
  hisItemCode: '',
  hisItemName: '',
  wsItemCode: '',
  wsItemName: '',
  hrItemCode: '',
  hrItemName: '',
  hisItemType: '',
  department: '',
  spec: '',
  price: 0,
  cost: 0,
  fitSex: '',
  isEmergency: '',
  shortName: '',
  startTime: '',
  endTime: '',
  remake: '',
  isStaining: '0',
  stainingResult: '',
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
});
let searchValue = ref('');
let defaultProps = {
  children: 'children',
  label: 'name'
};

let dictTreeTypeCodes: any = reactive(['SFXMTYPE']);
let sfxmTypeList = reactive([]);

// 方法定义区 =============
onMounted(() => {
  getFeeItemList();
  getDictItemsList();
});

async function getDictItemsList() {
  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const workGroupType = dictTreeTypeItems.data.find((item) => item.code === 'SFXMTYPE');
  sfxmTypeList.push(...workGroupType.detailDataList);
}

function handleOrgNodeClick(data: any) {
  labFeeItemForm.orgId = data.id;
  labFeeItemForm.orgName = data.name;
  getFeeItemList();
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
}

// 获取申请项目列表
function getFeeItemList() {
  FeeItemList.length = 0;
  showLoading.value = true;
  const url = '/lis/fee/item/findFeeItemList';
  let obj = {
    keyWords: searchValue.value,
    orgId: labFeeItemForm.orgId
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      FeeItemList.push(...res.data);
      if (FeeItemList.length > 0) {
        rowClick({
          row: FeeItemList[0]
        });
      }

      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}
// 删除数据
function handleDelete() {
  const selectRows = (proxy.$refs.labFeeItemTable as any).getCheckboxRecords();
  if (selectRows.length > 1) {
    VxeMessage('一次只可选择删除一条数据', VxeNotifyType.warning);
    return;
  }
  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的用户', VxeNotifyType.warning);
    return;
  }
  const url = '/lis/fee/item/deleteFeeItem';
  proxy.$http
    .post(url, selectRows[0])
    .then((res: any) => {
      getFeeItemList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
// 点击当前行// 行点击事件
const rowClick = ({ row }) => {
  Object.assign(form, row);
  Object.assign(labFeeItemForm, row);
};
// 自动生成助记符
function autoInputCode() {
  labFeeItemForm.inputCode = funBdsJsResult('firstPinYinFun', labFeeItemForm.feeName);
}
// 新建&重置
function add() {
  Object.keys(labFeeItemForm).forEach((key) => {
    switch (typeof labFeeItemForm[key]) {
      case 'string':
        labFeeItemForm[key] = '';
        break;
      case 'number':
        labFeeItemForm[key] = 0;
        break;
    }
  });
}

// 保存
function save() {
  let url = '';
  if (labFeeItemForm.id == '' || labFeeItemForm.id == null || labFeeItemForm.id == undefined) {
    url = '/lis/fee/item/addFeeItem';
  } else {
    url = '/lis/fee/item/editFeeItem';
  }
  proxy.$http
    .post(url, labFeeItemForm)
    .then((res: any) => {
      VxeMessage(res.status.msg, VxeNotifyType.success);
      getFeeItemList();
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 同步数据
async function pullApplyItem() {
  showDataLoading.value = true;
  const url = '/api/sys/hisEmployee/getInterfaceData';
  const params = {
    url: '/lisInterface/lisInterfacePost',
    code: 'GET_FEE_ITEM'
  };
  proxy.$http
    .get(url, { params: params })
    .then((res: any) => {
      showDataLoading.value = false;
      getFeeItemList();
    })
    .catch((err: any) => {
      showDataLoading.value = false;
      VxeMessage('同步失败', VxeNotifyType.error);
    });
}

async function pullApplyItemKnowLedge() {
  showKnowLedgeLoading.value = true;
  const url = '/api/sys/hisEmployee/getInterfaceData';
  const params = {
    url: '/feeItemKnowledge/syncFeeItemKnowledge',
    code: 'SYNC_FEE_ITEM_KNOWLEDGE'
  };
  proxy.$http
    .get(url, { params: params })
    .then((res: any) => {
      VxeMessage('同步成功', VxeNotifyType.success);
      showKnowLedgeLoading.value = false;
      getFeeItemList();
    })
    .catch((err: any) => {
      showKnowLedgeLoading.value = false;
      VxeMessage('同步失败', VxeNotifyType.error);
    });
}

// 回车查询
function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getFeeItemList();
  }
}
</script>
<style lang="scss" scoped>
#LabApplyItem {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-tabs {
      height: 100%;
      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0;
      }
      .el-tab-pane {
        height: 100%;
        .area {
          background-color: $base-white;
          // 附加按钮间距
          .button-blue,
          .button-red {
            margin: 5px 0 5px 5px;
          }
          .leftTable {
            height: calc(100% - 40px);
            // .vxe-table--render-wrapper {
            //   height: 100%;
            //   .vxe-table--main-wrapper {
            //     height: 100%;
            //     .vxe-table--body-wrapper {
            //       height: calc(100% - 26px) !important;
            //     }
            //   }
            // }
            // .vxe-table--render-default {
            //   height: 100%;
            // }
          }

          // 右侧基本信息表单
          .baseForm {
            .el-row {
              margin-left: 0 !important;
              margin-right: 0 !important;
            }
            .form-footer {
              .el-form-item__content {
                margin-left: 120px !important;
              }
            }
            .el-form-item--large {
              margin-bottom: 10px;
            }
            .el-radio {
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
